import { FC, memo } from 'react'
import { LtAvatarWrapper } from './style'

interface IState {
  children?: React.ReactNode
  size?: number | string
  src: string
  shape: 'circle' | 'square'
  clkAvatar?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, url: string) => void
}

const LtAvatar: FC<IState> = memo((props) => {
  const { src, size = 50, shape = 'square', clkAvatar } = props

  const clickAvatar = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    clkAvatar && clkAvatar(e, src)
  }
  return (
    <LtAvatarWrapper $shape={shape} $size={size} className="avatar" onClick={(e) => clickAvatar(e)}>
      <img src={src} alt="头像" />
    </LtAvatarWrapper>
  )
})

export default LtAvatar
